<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleClick">{{ count }} - {{ doubleCount }}</button>
    <div>{{obj.a}}</div>
    <Test name="哈哈哈哈啊哈"/>
  </div>
</template>

<script>
import { ref, reactive, computed, watchEffect, watch } from 'vue'
import Test from './Test'
export default {
  components: {
    Test
  },
  props: {},
  setup () { // 必写返回值
    const count = ref(0)
    const obj = reactive({
      a: 100
    })
    const doubleCount = computed(() => count.value * 2)
    function handleClick () {
      // 因为count 是 通过 ref 设置的
      // ref设置的值 需要通过value属性修改值
      count.value += 1
      // reactive 设置的值直接修改即可
      obj.a = 1000
      console.log(count)
    }
    watchEffect(() => {
      console.log('change count', count.value)
      console.log('change obj', obj.a)
    })

    watch(count, (newCount, oldCount) => {
      // 侦听属性 不写 .value
      console.log(newCount, oldCount)
    })
    return {
      count,
      obj,
      handleClick,
      doubleCount
    }
  }
}
</script>